﻿@model int?
@{
    var guid = Guid.NewGuid().ToString();
}

@Html.Hidden(string.Empty, Model, new { id = guid + "-val" })
<div id="mp-@guid">

    <div class="input-group">
        <input type="text" class="form-control" v-model="displayMpAccountName" autocomplete="off" />
        <span class="input-group-addon" data-toggle="modal" data-target="#@guid-modal" style="cursor:pointer;">选择</span>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="@guid-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="panel-default">
                    <div class="panel-heading">文章类型</div>
                    <div class="panel-body">
                        <table class="table">
                            <tr v-for="mpAccount in  mpAccounts">
                                <td>
                                    <el-radio v-model="displayMpAccountId" :label="mpAccount.id">{{mpAccount.name}}</el-radio>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="panel-footer">
                        <button type="button" @@click="select" class="btn btn-primary">选择</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#mp-@guid',
        data: {
            page: {skipCount: 0, maxResultCount: 100},
            filter: { status: 0 },
            mpAccounts: [],
            displayMpAccountName: null,
            displayMpAccountId: null
        },
        methods: {
            getMpAccounts: function () {
                var vm = this;
                $.post('/cms/weixinMpAccount/getWeixinMpAccounts',{
                    page: this.page,
                    filter: this.filter
                }).done(function (res) {
                    vm.mpAccounts = res.result.items;
                });
            },
            select: function () {
                var vm = this;
                var checkedMpAccount = _.find(this.mpAccounts, function (account) { return account.id == vm.displayMpAccountId });
                if (checkedMpAccount) {
                    this.displayMpAccountName = checkedMpAccount.name;
                    $('#@guid-val').val(this.displayMpAccountId);
                }
                $('#@guid-modal').modal('hide');
            }
        },

        created: function () {
            this.getMpAccounts();
        }
    })



</script>